<template>
     <div class="item-box">
          <div class="item-box-title">
               <div class="iconBox">
                    <slot name="icon"></slot>
               </div>
               <div class="text">
                    {{ attrs.title }}
               </div>
          </div>
          <div class="content">
               <slot></slot>
          </div>
     </div>
</template>

<script setup lang="ts">
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>

<style lang="scss" scoped>
.item-box {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
     padding: 5px;

     .item-box-title {
          background: url('@/assets/images/largeScreen/小标题框架.png')
               no-repeat center center;
          background-size: 100% 120%;
          background-position-y: -15px;
          height: 40px;
          width: 100%;
          display: flex;
          padding-left: 50px;
          line-height: 40px;
          // .iconBox {
          //     width: 20%;
          //     display: flex;
          //     align-items: center;
          // }

          .text {
               width: 33%;
               height: 100%;
               display: flex;
               align-items: center;
               font-size: 1vw;
               color: #d3eafd;
               letter-spacing: 2px;
               white-space: nowrap;
               font-family: 'PangMenZhengDaoBiaoTiTi';
               // text-shadow: 0 0 10px #0c4f8a;
          }
     }

     .content {
          width: 100%;
          height: calc(100% - 40px);
          // background: #021b23;
          border-radius: 3px;
          padding: 3px;
     }
}
</style>
